<template>
    <div class="monitor-container">
        <div class="monitor-content">
            <div v-show="setting.leftOpen"
                 class="conitor-filter">
                <el-form :inline="true"
                         label-position="top">
                    <el-form-item v-if="showOrganization"
                                  label="组织机构">
                        <tree-select
                            v-model="deviceForm.organizationId"
                            :options="organizationTree"
                            :props="organizationProps"
                            placeholder="请选择组织机构"
                            style="width: 300px"
                            @change="organizationChange"
                            @getValue="(v) => deviceForm.organizationId = v"
                        />
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-select v-model="deviceForm.deviceType"
                                   placeholder="请选择设备类型"
                                   filterable
                                   style="width: 300px"
                                   @change="deviceTypeChange">
                            <el-option
                                v-for="item in deviceTypeOpts"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备型号">
                        <el-select v-model="deviceForm.deviceId"
                                   placeholder="请选择设备型号"
                                   filterable
                                   style="width: 300px"
                                   @change="deviceChange">
                            <el-option
                                v-for="item in deviceOpts"
                                :key="item.tugboatId"
                                :label="item.tugboatName"
                                :value="item.tugboatId"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="窗口分割数">
                        <el-select v-model="setting.windowDivNum"
                                   placeholder="请选择窗口分割数"
                                   style="width: 300px"
                                   @change="windowDivChange">
                            <el-option
                                v-for="item in setting.windowDivOpts"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="回放开始时间">
                        <el-date-picker
                            v-model="setting.backPlayStartTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            placeholder="回放开始时间"/>
                    </el-form-item>
                    <el-form-item label="回放结束时间">
                        <el-date-picker
                            v-model="setting.backPlayEndTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            placeholder="回放结束时间"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   @click="clickStartPlayback()">开始回放</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   @click="clickStartRecord('realplay')">开始录像</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   style="min-width: 80px"
                                   @click="clickCapturePic()">抓图</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   @click="clickStopPlayback()">停止回放</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger"
                                   @click="clickStopRecord('realplay')">停止录像</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning"
                                   @click="clickStopRealPlayCheckedWin">停止预览</el-button>
                    </el-form-item>
                    <el-collapse v-model="localSetting.active"
                                 style="width: 300px">
                        <el-collapse-item name="1">
                            <template slot="title"><span style="font-weight: bold">本地设置</span></template>
                            <el-form-item>
                                <el-input v-model="localSetting.recordPath"
                                          style="width: 300px"
                                          placeholder="录像文件保存路径"/>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="localSetting.downloadPath"
                                          style="width: 300px"
                                          placeholder="回放下载保存路径"/>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="localSetting.previewPicPath"
                                          style="width: 300px"
                                          placeholder="预览抓图保存路径"/>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="localSetting.playbackPicPath"
                                          style="width: 300px"
                                          placeholder="回放抓图保存路径"/>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="localSetting.playbackFilePath"
                                          style="width: 300px"
                                          placeholder="回放剪辑保存路径"/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary"
                                           @click="clickGetLocalCfg">获取</el-button>
                                <el-button type="primary"
                                           @click="clickSetLocalCfg">设置</el-button>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                </el-form>
            </div>
            <el-button :icon="setting.leftOpen ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                       style="width: 14px;padding: 0;border-radius: 0"
                       @click="setting.leftOpen = !setting.leftOpen"/>
            <div id="divPlugin"
                 class="monitor-window"/>
            <el-button :icon="setting.rightOpen ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                       style="width: 14px;padding: 0;border-radius: 0"
                       @click="setting.rightOpen = !setting.rightOpen"/>
            <div v-show="setting.rightOpen"
                 class="monitor-toolbar">
                <div class="monitor-control">
                    <div class="el-button-group ">
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(5)"
                             @mouseup="mouseUpPTZControl">左上</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(1)"
                             @mouseup="mouseUpPTZControl">向上</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(7)"
                             @mouseup="mouseUpPTZControl">右上</div>
                    </div>
                    <br>
                    <div class="el-button-group ">
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(3)"
                             @mouseup="mouseUpPTZControl">向左</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(9)"
                             @mouseup="mouseUpPTZControl">自动</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(4)"
                             @mouseup="mouseUpPTZControl">向右</div>
                    </div>
                    <br>
                    <div class="el-button-group ">
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(6)"
                             @mouseup="mouseUpPTZControl">左下</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(2)"
                             @mouseup="mouseUpPTZControl">向下</div>
                        <div class="el-button primary"
                             @mousedown="mouseDownPTZControl(8)"
                             @mouseup="mouseUpPTZControl">右下</div>
                    </div>
                </div>
                <div class="channel-label">视频设备列表</div>
                <div class="channel-list">
                    <el-form :inline="true">
                        <el-form-item v-for="(item, index) in cameraConfigOpts"
                                      :key="index">
                            <el-button :loading="loginLoading"
                                       type="primary"
                                       class="my-tag"
                                       @click="clickCameraConfig(item)">{{ item.nvrName }}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="channel-label"
                     style="margin-top: 0">数字通道列表</div>
                <div class="channel-list">
                    <el-form :inline="true">
                        <el-form-item v-for="(item,index) in hkvInfo.channels"
                                      :key="index">
                            <el-button type="success"
                                       class="my-tag"
                                       @click="clickStartRealPlay(item)">{{ item.name }}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import ShipDynamicShipnvrRepo from "@/assets/repos/ship/shipDynamicShipnvr";
// import ShipDataRepo from "@/assets/repos/ship/shipData";
// import PortalCraneRepo from "@/assets/repos/ship/portalCrane";
// import DesignsRepo from "@/assets/repos/ship/designs";
import TreeSelect from "./components/tree-select/index";
import $ from "jquery";
export default {
    components: { TreeSelect },
    data()
    {
        return {
            WebVideoCtrl: null,
            localSetting: {
                active: 1,
                visible: false,
                recordPath: "",
                downloadPath: "",
                previewPicPath: "",
                playbackPicPath: "",
                playbackFilePath: ""
            },
            setting: {
                leftOpen: true,
                rightOpen: true,
                windowDivNum: 1,
                windowDivOpts: [
                    {
                        value: 1,
                        label: "1x1"
                    },
                    {
                        value: 2,
                        label: "2x2"
                    },
                    {
                        value: 3,
                        label: "3x3"
                    },
                    {
                        value: 4,
                        label: "4x4"
                    },
                    {
                        value: 5,
                        label: "5x5"
                    },
                    {
                        value: 6,
                        label: "6x6"
                    }
                ],
                backPlayStartTime: "",
                backPlayEndTime: ""
            },
            showForm: false,
            showControl: false,
            showOrganization: false,
            deviceForm: {
                deviceId: "",
                deviceType: "",
                cameraConfigId: "",
                organizationId: ""
                // deviceId: "1a1e6815b0ce465c886166114580f09c",
                // deviceType: "PORTAL_CRANE",
                // cameraConfigId: "",
                // organizationId: "462d547f5bdd41a99269ea1c9e909c82"
            },
            deviceTypeOpts: [
                // {
                //     value: "SHIP",
                //     label: "船舶"
                // },
                // {
                //     value: "PORTAL_CRANE",
                //     label: "门机"
                // }
                {
                    value:'tugboat',
                    label:'拖轮'
                }
            ],
            deviceOpts: [],
            shipDataOpts: [],
            portalCraneOpts: [],
            cameraConfigOpts: [],
            organizationTree: [],
            organizationProps: {
                label: "fullName",
                value: "id",
                children: "children"
            },
            pluginWidth: 1000,
            pluginHeight: 700,
            hkvInfo: {
                ip: "", // 海康威视摄像头/硬盘录像机的ip地址
                port: "", // 海康威视摄像头/硬盘录像机的端口
                username: "", // 海康威视摄像头/硬盘录像机的用户名
                password: "", // 海康威视摄像头/硬盘录像机的密码
                channels: []// 海康威视摄像头/硬盘录像机的通道

                // ip: "192.168.75.185", // 海康威视摄像头/硬盘录像机的ip地址
                // port: "4264", // 海康威视摄像头/硬盘录像机的端口
                // username: "admin", // 海康威视摄像头/硬盘录像机的用户名
                // password: "asdqwe123", // 海康威视摄像头/硬盘录像机的密码
                // channels: []// 海康威视摄像头/硬盘录像机的通道

                // ip: "192.168.75.102", // 海康威视摄像头/硬盘录像机的ip地址
                // port: "5000", // 海康威视摄像头/硬盘录像机的端口
                // username: "admin", // 海康威视摄像头/硬盘录像机的用户名
                // password: "zgt50015001", // 海康威视摄像头/硬盘录像机的密码
                // channels: []// 海康威视摄像头/硬盘录像机的通道

            },
            mySelectWnd: 0, // 当前选中的窗口
            g_bPTZAuto: false,
            iProtocol: 1,
            loginLoading: false,
            startPlayLoading: false,
            iStreamType: 1,
            bZeroChannel: false,
            iRtspPort: 0,
            g_szRecordType: "",
            windowChannelMap: {},
            // isLan: false
            isLan: true,
            row:this.$route.query.data
        };
    },
    created()
    {
        console.log(window.location.host);
        if (window.location.host === "192.168.75.185:10860")
        {
            this.isLan = true;
        }
        // let deviceId = this.$route.query.deviceId;
        // let deviceType = this.$route.query.deviceType;
        // let organizationId = this.$route.query.organizationId;
        // if (deviceId && deviceType && organizationId && deviceId !== "" && deviceType !== "" && organizationId !== "")
        // {
        //     this.deviceForm.deviceId = deviceId;
        //     this.deviceForm.deviceType = deviceType;
        //     this.deviceForm.organizationId = organizationId;
        // }
        this.getDeviceOpts()    // 获取全部作业拖轮
        this.loadDevice();
        
    },
    mounted()
    {
            this.WebVideoCtrl = window.WebVideoCtrl;
            // this.initWidthHeight();
            this.videoInitPlugin();        
    },
    destroyed()
    {
        this.clickStopRealPlay();
        this.onLogout();
    },
    methods:
    {
        async loadDevice()
        {
            // 组织机构
            // this.$store.dispatch("dictOrganizationTree").then(tree =>
            // {
            //     this.organizationTree = tree;
            // }).catch((err) =>
            // {
            //     this.$message.error(err || "获取机构列表信息失败");
            // });
            // // 查询船舶
            // await ShipDataRepo.list().then(response =>
            // {
            //     this.shipDataOpts = response.map((item, index) =>
            //     {
            //         return Object.assign({}, { value: item.id, label: item.shipName, organizationId: item.organizationId });
            //     });
            // }).catch((err) => { this.$message.error(err || "加载船舶失败"); });
            // // 查询门机
            // await PortalCraneRepo.list().then(response =>
            // {
            //     this.portalCraneOpts = response.map((item, index) =>
            //     {
            //         return Object.assign({}, { value: item.id, label: item.craneName, organizationId: item.organizationId });
            //     });
            // }).catch((err) => { this.$message.error(err || "加载门机失败"); });

            // if (this.deviceForm.deviceId && this.deviceForm.deviceId !== "")
            // {
            //     this.showOrganization = false;
            //     if (this.deviceForm.deviceType === "SHIP")
            //     {
            //         this.deviceOpts = this.shipDataOpts.filter(e => e.organizationId === this.deviceForm.organizationId);
            //     }
            //     else
            //     {
            //         this.deviceOpts = this.portalCraneOpts.filter(e => e.organizationId === this.deviceForm.organizationId);
            //     }
            //     this.deviceChange(this.row.tugboatId);
            // }
                this.deviceChange(this.row.tugboatId);
            setTimeout(() => { this.showOrganization = true; }, 300);
        },
        async organizationChange(v)
        {
            this.deviceForm.deviceId = "";
            this.deviceForm.deviceType = "";
            this.deviceForm.cameraConfigId = "";
            this.cameraConfigOpts = [];
            this.hkvInfo.channels = [];
            this.setting.windowDivNum = 1;
            await this.windowDivChange(1);
            await this.clickStopRealPlay();
            await this.onLogout();
        },
        deviceTypeChange(v)
        {
            // this.deviceForm.deviceId = "";
            // if (v === "SHIP")
            // {
            //     this.deviceOpts = this.shipDataOpts.filter(e => e.organizationId === this.deviceForm.organizationId);
            // }
            // else
            // {
            //     this.deviceOpts = this.portalCraneOpts.filter(e => e.organizationId === this.deviceForm.organizationId);
            // }
        },
        getDeviceOpts(){
            this.$http
                .get(
                    `/psys-wheelbarge-service/api/external/dispatchtable/${this.$version}/listAllMonitor`,
                )
                .then(res => {
                    console.log(res.data.data);
                    this.deviceOpts = res.data.data
                })
                .catch(error => {});
        },
        deviceChange(deviceId)
        {
            // this.deviceForm.cameraConfigId = "";
            this.cameraConfigOpts = [];
            this.$http
                .get(
                    `/psys-wheelbarge-service/api/external/dispatchtable/${this.$version}/getMonitorByTugboatId?tugboatId=${deviceId}`,
                )
                .then(res => {
                    console.log(res.data.data[0]);
                    // this.cameraConfigOpts = res.data.data
                    let data = res.data.data[0]
                    this.cameraConfigOpts = [{
                        id: data.tugboatId,
                        label:data.label,
                        nvrIp: data.ipAddress,
                        nvrLanIp: data.ipAddress,
                        nvrLanPort: data.port,
                        nvrName: data.label,
                        nvrPort: data.port,
                        nvrPwd: data.password,
                        nvrUser: data.username
                    }];
                    // 目前暂时写死数据结构，等待接口联调
                    this.organizationTree = [{
                         fullName:"镇江港务集团",
                         id:'1',
                         children:[
                            {
                                fullName:"轮驳分公司",
                                id:'11',
                            }
                         ]
                    }]
                    this.deviceForm.organizationId = '11';
                    this.deviceForm.deviceType = 'tugboat'
                    this.deviceForm.deviceId = this.row.tugboatId
                })
                .catch(error => {});
            // this.cameraConfigOpts = [{
            //     createdBy: "root",
            //     createdDate: "2021-03-17 11:28:14",
            //     deleted: false,
            //     id: "b05315f404754271a365de4f7e3233a6",
            //     label: "硬盘录像机",
            //     lastModifiedBy: "dcy",
            //     lastModifiedDate: "2021-04-02 12:47:21",
            //     nvrIp: "192.168.75.102",
            //     nvrLanIp: "192.168.75.102",
            //     nvrLanPort: "5000",
            //     nvrName: "硬盘录像机",
            //     nvrPort: "5000",
            //     nvrPwd: "zgt50015001",
            //     nvrUser: "admin",
            //     nvrUsesocketip: false,
            //     pullFlowUrls: null,
            //     shipId: "1a1e6815b0ce465c886166114580f09c",
            //     sorting: "0"}];
            // ShipDynamicShipnvrRepo.list(params).then(res =>
            // {
            //     this.cameraConfigOpts = res;
            //     if (this.cameraConfigOpts && this.cameraConfigOpts.length > 0)
            //     {
            //         // this.clickCameraConfig(this.cameraConfigOpts[0]);
            //     }
            // }).catch(err => { this.$message.error(err || "加载监控信息失败"); });
        },
        async clickCameraConfig(config)
        {
            console.log(config);
            // 停止窗口
            this.setting.windowDivNum = 1;
            await this.windowDivChange(1);
            // await this.clickStopRealPlay();
            // await this.onLogout();
            // if (this.isLan && config.nvrLanIp && config.nvrLanIp !== "" && config.nvrLanPort && config.nvrLanPort !== "")
            // {
            //     this.hkvInfo.ip = config.nvrLanIp;
            //     this.hkvInfo.port = config.nvrLanPort;
            // }
            // else
            // {
            //     this.hkvInfo.ip = config.nvrIp;
            //     this.hkvInfo.port = config.nvrPort;
            // }
            this.hkvInfo.ip = config.nvrIp;
            this.hkvInfo.port = config.nvrPort;
            this.hkvInfo.username = config.nvrUser;
            this.hkvInfo.password = config.nvrPwd;
            await this.onLogin();
        },
        windowDivChange(iType)
        {
            iType = parseInt(iType, 10);
            this.WebVideoCtrl.I_ChangeWndNum(iType);
        },
        onLogin()
        {
            let that = this;
            that.loginLoading = true;
            // 登录设备
            console.log("登录设备", JSON.stringify(that.hkvInfo));
            this.WebVideoCtrl.I_Login(that.hkvInfo.ip, that.iProtocol, that.hkvInfo.port, that.hkvInfo.username, that.hkvInfo.password, {
                success: function(xmlDoc)
                {
                    console.log(that.hkvInfo.ip, "登录成功");
                    that.getChannelInfo();
                    // that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
                    that.loginLoading = false;
                    that.$message({
                        showClose: true,
                        message: "登录成功",
                        type: "success"
                    });
                },
                error: function(err)
                {
                    console.log("登录失败:", err);
                    that.loginLoading = false;
                    that.$message({
                        showClose: true,
                        message: "登录失败",
                        type: "error"
                    });
                }
            });
        },
        onLogout()
        {
            let szIP = this.hkvInfo.ip;
            let szInfo = "";
            // eslint-disable-next-line eqeqeq
            if (szIP == "")
            {
                return;
            }
            let iRet = this.WebVideoCtrl.I_Logout(szIP);
            // eslint-disable-next-line eqeqeq
            if (iRet == 0)
            {
                szInfo = "退出成功！";
            }
            else
            {
                szInfo = "退出失败！";
            }
            console.log(szIP + " " + szInfo);
        },
        clickStartRealPlay(channel)
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szIP = this.hkvInfo.ip;
            let iStreamType = 1;
            let iChannelID = channel.id;
            let bZeroChannel = false;
            let szInfo = "";
            if (szIP === "")
            {
                return;
            }

            if (oWndInfo != null)
            { // 已经在播放了，先停止
                this.WebVideoCtrl.I_Stop();
            }

            let iRet = this.WebVideoCtrl.I_StartRealPlay(szIP, {
                iStreamType: iStreamType,
                iChannelID: iChannelID,
                bZeroChannel: bZeroChannel
            });

            if (iRet === 0)
            {
                szInfo = channel.name + "开始预览成功！";
                this.windowChannelMap[this.mySelectWnd] = iChannelID;
                this.$notify({
                    title: "成功",
                    message: szInfo,
                    type: "success"
                });
            }
            else
            {
                szInfo = channel.name + "开始预览失败！";
                this.$notify({
                    title: "失败",
                    message: szInfo,
                    type: "error"
                });
            }
            this.startPlayLoading = false;
        },
        videoInitPlugin: function()
        {
            let that = this;
            // 检查插件是否已经安装过
            let iRet = this.WebVideoCtrl.I_CheckPluginInstall();
            // eslint-disable-next-line
            if (iRet == -2)
            {
                alert("您的Chrome浏览器版本过高，不支持NPAPI插件！");
                return;
            }
            // eslint-disable-next-line
            else if (iRet == -1)
            {
                alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
                return;
            }
            // 初始化插件参数及插入插件
            this.WebVideoCtrl.I_InitPlugin(this.pluginWidth, this.pluginHeight, {
                bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
                iWndowType: 2,
                cbSelWnd: function(xmlDoc)
                {
                    that.mySelectWnd = $(xmlDoc).find("SelectWnd").eq(0).text();
                    let szInfo = "当前选择的窗口编号：" + that.mySelectWnd;
                    console.log(szInfo);
                }
            });
            this.WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            this.windowDivChange(1);
        },
        getDevicePort: function(szDeviceIdentify)
        {
            let oPort = this.WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
            this.iRtspPort = oPort.iRtspPort;
        },
        startRealPlay: function(szDeviceIdentify, iWndIndex, iChannelID)
        {
            let that = this;
            this.WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                iRtspPort: that.iRtspPort,
                iWndIndex: iWndIndex,
                iStreamType: 1,
                iChannelID: iChannelID,
                bZeroChannel: that.bZeroChannel,
                success: function()
                {
                    that.$notify({
                        title: "成功",
                        message: "开始预览通道" + iChannelID + "成功",
                        type: "success"
                    });
                    that.windowChannelMap[iWndIndex] = iChannelID;
                },
                error: function(status, xmlDoc2)
                {
                    console.log(xmlDoc2);// 不能删除
                    that.$notify({
                        title: "失败",
                        message: "开始预览通道" + iChannelID + "失败",
                        type: "error"
                    });
                    if (status === 403)
                    {
                        console.log("szInfo 设备不支持Websocket取流！");
                    }
                    else
                    {
                        console.log("开始预览失败 ", status, xmlDoc2);
                    }
                }
            });
        },
        async clickStopRealPlay()
        {
            let vm = this;
            let j = vm.setting.windowDivNum * vm.setting.windowDivNum;
            for (let i = 0; i < j; i++)
            {
                setTimeout(vm.stopRealPlay(i), 1000);
            }
        },
        clickStopRealPlayCheckedWin()
        {
            setTimeout(this.stopRealPlay(this.mySelectWnd), 1000);
        },
        stopRealPlay: function(iWndIndex)
        {
            console.log("停止窗口:", iWndIndex);
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(iWndIndex);
            if (oWndInfo != null)
            {
                let iRet = this.WebVideoCtrl.I_Stop();
                // eslint-disable-next-line eqeqeq
                if (iRet == 0)
                {
                    console.log("停止预览窗口" + iWndIndex + "成功");
                }
                else
                {
                    console.log("停止预览窗口" + iWndIndex + "失败");
                }
            }
        },
        // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
        getChannelInfo: function()
        {
            let that = this;
            // let szIP = this.hkvInfo.ip + "_" + this.hkvInfo.port;
            let szIP = this.hkvInfo.ip;
            that.hkvInfo.channels = [];
            // 模拟通道
            this.WebVideoCtrl.I_GetAnalogChannelInfo(szIP, {
                async: false,
                success: function(xmlDoc)
                {
                    let oChannels = $(xmlDoc).find("VideoInputChannel");

                    $.each(oChannels, function(i)
                    {
                        let id = $(this).find("id").eq(0).text();
                        let name = $(this).find("name").eq(0).text();
                        let online = $(this).find("online").eq(0).text();
                        let channel = {
                            id: id,
                            name: name,
                            online: online
                        };
                        if (name !== "")
                        {
                            that.hkvInfo.channels.push(channel);
                        }
                        console.log("id: " + id + "; name: " + name + "; online: " + online);
                    });
                },
                error: function()
                {
                    console.log(szIP + " 获取模拟通道失败！");
                }
            });
            // 数字通道
            this.WebVideoCtrl.I_GetDigitalChannelInfo(szIP, {
                async: false,
                success: function(xmlDoc)
                {
                    let oChannels = $(xmlDoc).find("InputProxyChannelStatus");
                    $.each(oChannels, function(i)
                    {
                        let id = $(this).find("id").eq(0).text();
                        let name = $(this).find("name").eq(0).text();
                        let online = $(this).find("online").eq(0).text();
                        let channel = {
                            id: id,
                            name: name,
                            online: online
                        };
                        if (name !== "")
                        {
                            that.hkvInfo.channels.push(channel);
                        }
                        console.log("id: " + id + "; name: " + name + "; online: " + online);
                    });
                },
                error: function()
                {
                    console.log(szIP + " 获取数字通道失败！");
                }
            });
            // 零通道
            this.WebVideoCtrl.I_GetZeroChannelInfo(szIP, {
                async: false,
                success: function(xmlDoc)
                {
                    let oChannels = $(xmlDoc).find("ZeroVideoChannel");
                    $.each(oChannels, function(i)
                    {
                        let id = $(this).find("id").eq(0).text();
                        let name = $(this).find("name").eq(0).text();
                        let online = $(this).find("online").eq(0).text();
                        let channel = {
                            id: id,
                            name: name,
                            online: online
                        };
                        if (name !== "")
                        {
                            that.hkvInfo.channels.push(channel);
                        }
                        console.log("id: " + id + "; name: " + name + "; online: " + online);
                    });
                },
                error: function()
                {
                    console.log(szIP + " 获取零通道失败！");
                }
            });
            console.log("数字通道", that.hkvInfo.channels);
            if (that.hkvInfo.channels && that.hkvInfo.channels.length === 1)
            {
                this.clickStartRealPlay(that.hkvInfo.channels[0]);
            }
        },
        mouseDownPTZControl: function(iPTZIndex)
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);

            if (oWndInfo !== null)
            {
                if (iPTZIndex === 9 && this.g_bPTZAuto)
                {
                    // eslint-disable-next-line
                    iPTZSpeed = 0;
                }
                else
                {
                    this.g_bPTZAuto = false;
                }

                this.WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
                    iPTZSpeed: 4,
                    mysuccess: function(xmlStr)
                    {
                        console.log("I_PTZControl", xmlStr);
                        if (iPTZIndex === 9 && this.g_bPTZAuto)
                        {
                            console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseDown");
                        }
                        else
                        {
                            console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！mouseDown");
                        }
                        if (iPTZIndex === 9)
                        {
                            this.g_bPTZAuto = !this.g_bPTZAuto;
                        }
                    },
                    error: function(status, xmlDoc)
                    {
                        console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！mouseDown", status, xmlDoc);
                    }
                });
            }
        },
        mouseUpPTZControl: function()
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            if (oWndInfo !== null)
            {
                this.WebVideoCtrl.I_PTZControl(1, true, {
                    mysuccess: function(xmlStr)
                    {
                        console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseUp", xmlStr);
                    },
                    error: function(status, xmlDoc)
                    {
                        console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！mouseUp", status, xmlDoc);
                    }
                });
            }
        },
        // 开始录像
        clickStartRecord()
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szInfo = "";

            if (oWndInfo != null)
            {
                let szChannelID = this.windowChannelMap[this.mySelectWnd];
                let szFileName = oWndInfo.szIP + "_" + szChannelID + "_" + new Date().getTime();
                let iRet = this.WebVideoCtrl.I_StartRecord(szFileName);
                // eslint-disable-next-line eqeqeq
                if (iRet == 0)
                {
                    szInfo = "开始录像成功！";
                    this.$notify({
                        title: "成功",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "success"
                    });
                }
                else
                {
                    szInfo = "开始录像失败！";
                    this.$notify({
                        title: "失败",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "error"
                    });
                }
            }
        },
        // 停止录像
        clickStopRecord()
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szInfo = "";
            if (oWndInfo != null)
            {
                let iRet = this.WebVideoCtrl.I_StopRecord();
                // eslint-disable-next-line eqeqeq
                if (iRet == 0)
                {
                    szInfo = "停止录像成功！";
                    this.$notify({
                        title: "成功",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "success"
                    });
                }
                else
                {
                    szInfo = "停止录像失败！";
                    this.$notify({
                        title: "失败",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "error"
                    });
                }
            }
        },
        // 抓图
        clickCapturePic()
        {
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szInfo = "";

            if (oWndInfo != null)
            {
                let szChannelID = this.windowChannelMap[this.mySelectWnd];
                let szPicName = oWndInfo.szIP + "_" + szChannelID + "_" + new Date().getTime();
                let iRet = this.WebVideoCtrl.I_CapturePic(szPicName);
                // eslint-disable-next-line eqeqeq
                if (iRet == 0)
                {
                    szInfo = "抓图成功！";
                    this.$notify({
                        title: "成功",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "success"
                    });
                }
                else
                {
                    szInfo = "抓图失败！";
                    this.$notify({
                        title: "失败",
                        message: "窗口:" + this.mySelectWnd + szInfo,
                        type: "error"
                    });
                }
            }
        },
        // 开始回放
        clickStartPlayback()
        {
            console.log(this.hkvInfo);
            console.log(this.setting);
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szIP = this.hkvInfo.ip;
            let bZeroChannel = false;
            let iChannelID = this.windowChannelMap[this.mySelectWnd];
            let szStartTime = this.setting.backPlayStartTime;
            let szEndTime = this.setting.backPlayEndTime;
            let szInfo = "";
            let bChecked = false;
            // let bChecked = true;
            let iRet = -1;
            // eslint-disable-next-line eqeqeq
            if (szIP == "")
            {
                return;
            }
            if (bZeroChannel)
            { // 零通道不支持回放
                return;
            }
            if (oWndInfo != null)
            { // 已经在播放了，先停止
                this.WebVideoCtrl.I_Stop();
            }
            if (bChecked)
            { // 启用转码回放
                let oTransCodeParam = {
                    TransFrameRate: "14", // 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
                    TransResolution: "1", // 255：Auto，3：4CIF，2：QCIF，1：CIF
                    TransBitrate: "19"// 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
                };
                iRet = this.WebVideoCtrl.I_StartPlayback(szIP, {
                    iChannelID: iChannelID,
                    szStartTime: szStartTime,
                    szEndTime: szEndTime,
                    oTransCodeParam: oTransCodeParam
                });
                console.log('iRet',iRet);
            }
            else
            {
                iRet = this.WebVideoCtrl.I_StartPlayback(szIP, {
                    iChannelID: iChannelID,
                    szStartTime: szStartTime,
                    szEndTime: szEndTime
                });
            }
            // eslint-disable-next-line eqeqeq
            if (iRet == 0)
            {
                szInfo = "开始回放成功！";
                this.$notify({
                    title: "成功",
                    message: "窗口:" + this.mySelectWnd + szInfo,
                    type: "success"
                });
            }
            else
            {
                szInfo = "开始回放失败！";
                this.$notify({
                    title: "失败",
                    message: "窗口:" + this.mySelectWnd + szInfo,
                    type: "error"
                });
            }
        },
        // 停止回放
        clickStopPlayback()
        {
            let that = this;
            let oWndInfo = this.WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
            let szInfo = "";
            if (oWndInfo != null)
            {
                let iRet = this.WebVideoCtrl.I_Stop();
                // eslint-disable-next-line eqeqeq
                if (iRet == 0)
                {
                    szInfo = "停止回放成功！";
                    that.$notify({
                        title: "成功",
                        message: "窗口:" + that.mySelectWnd + szInfo,
                        type: "success"
                    });
                }
                else
                {
                    szInfo = "停止回放失败！";
                    that.$notify({
                        title: "失败",
                        message: "窗口:" + that.mySelectWnd + szInfo,
                        type: "error"
                    });
                }
            }
        },
        // 获取本地参数
        clickGetLocalCfg()
        {
            let xmlDoc = this.WebVideoCtrl.I_GetLocalCfg();
            this.localSetting.netsPreach = $(xmlDoc).find("BuffNumberType").eq(0).text();
            this.localSetting.wndSize = $(xmlDoc).find("PlayWndType").eq(0).text();
            this.localSetting.rulesInfo = $(xmlDoc).find("IVSMode").eq(0).text();
            this.localSetting.captureFileFormat = $(xmlDoc).find("CaptureFileFormat").eq(0).text();
            this.localSetting.packSize = $(xmlDoc).find("PackgeSize").eq(0).text();
            this.localSetting.recordPath = $(xmlDoc).find("RecordPath").eq(0).text();
            this.localSetting.downloadPath = $(xmlDoc).find("DownloadPath").eq(0).text();
            this.localSetting.previewPicPath = $(xmlDoc).find("CapturePath").eq(0).text();
            this.localSetting.playbackPicPath = $(xmlDoc).find("PlaybackPicPath").eq(0).text();
            this.localSetting.playbackFilePath = $(xmlDoc).find("PlaybackFilePath").eq(0).text();
            this.localSetting.protocolType = $(xmlDoc).find("ProtocolType").eq(0).text();
        },
        // 设置本地参数
        clickSetLocalCfg()
        {
            let arrXml = [];
            let szInfo = "";
            arrXml.push("<LocalConfigInfo>");
            arrXml.push("<PackgeSize>" + this.localSetting.packSize + "</PackgeSize>");
            arrXml.push("<PlayWndType>" + this.localSetting.wndSize + "</PlayWndType>");
            arrXml.push("<BuffNumberType>" + this.localSetting.netsPreach + "</BuffNumberType>");
            arrXml.push("<RecordPath>" + this.localSetting.recordPath + "</RecordPath>");
            arrXml.push("<CapturePath>" + this.localSetting.previewPicPath + "</CapturePath>");
            arrXml.push("<PlaybackFilePath>" + this.localSetting.playbackFilePath + "</PlaybackFilePath>");
            arrXml.push("<PlaybackPicPath>" + this.localSetting.playbackPicPath + "</PlaybackPicPath>");
            arrXml.push("<DownloadPath>" + this.localSetting.downloadPath + "</DownloadPath>");
            arrXml.push("<IVSMode>" + this.localSetting.rulesInfo + "</IVSMode>");
            arrXml.push("<CaptureFileFormat>" + this.localSetting.captureFileFormat + "</CaptureFileFormat>");
            arrXml.push("<ProtocolType>" + this.localSetting.protocolType + "</ProtocolType>");
            arrXml.push("</LocalConfigInfo>");
            let iRet = this.WebVideoCtrl.I_SetLocalCfg(arrXml.join(""));
            // eslint-disable-next-line eqeqeq
            if (iRet == 0)
            {
                szInfo = "本地配置设置成功！";
                this.$notify({
                    title: "成功",
                    message: szInfo,
                    type: "success"
                });
            }
            else
            {
                szInfo = "本地配置设置失败！";
                this.$notify({
                    title: "失败",
                    message: szInfo,
                    type: "error"
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.monitor-container{
    height: 80vh;
    padding: 20px;
    overflow: auto;
    .monitor-content{
        display: flex;
        .conitor-filter{
            width: 340px;
            min-width: 340px;
        }
        .monitor-toolbar{
            min-width: 320px;
            padding: 0 20px;
            .channel-label{
                font-size: 16px;
                font-weight: bold;
                margin: 15px 0;
            }
        }
    }
    .monitor-setting{
        margin: 0 0 0 340px;
    }
}
</style>
